import React, { Component } from 'react';
import { Tabs, Cascader, Input, Space, Table, Checkbox, Switch, Button, Steps } from 'antd';
import axios from 'axios'
// import store from '../../../../../../redux/store'
import { connect } from 'react-redux'
//TAB切换
const { TabPane } = Tabs;
//搜索框
const { Search } = Input;

const options = [
    {
        value: 'zhejiang',
        label: 'Zhejiang',
        children: [
            {
                value: 'hangzhou',
                label: 'Hangzhou',
                children: [
                    {
                        value: 'xihu',
                        label: 'West Lake',
                    },
                ],
            },
        ],
    },
    {
        value: 'jiangsu',
        label: 'Jiangsu',
        children: [
            {
                value: 'nanjing',
                label: 'Nanjing',
                children: [
                    {
                        value: 'zhonghuamen',
                        label: 'Zhong Hua Men',
                    },
                ],
            },
        ],
    },
];
//点击搜索
function onChange(value) {
    console.log(value);
}
let changevalue = (record) => {
    console.log('record: ', record);
}

//添加里面进度条
const { Step } = Steps;
class Goods_management extends Component {
    state = {
        data: [],
        isShow: false,
        size: 'small',
        current: 0,
        columns: [
            {
                title: 'ID',
                dataIndex: 'id',
                key: 'id',
                width: "70px",
                align: 'center',
            },
            {
                title: '商品图',
                dataIndex: '',
                key: 'img',
                width: "80px",
                align: 'center',
                render: (record) => <img src={record.img} alt='' style={{ width: "50px", height: "50px" }} />
            },
            {
                title: '商品名称',
                dataIndex: '',
                key: 'name',
                width: "450px",
                align: 'center',
                render: (record) => <p style={{ width: "100%", height: "50px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{record.name}</p>
            },
            {
                title: '商品售价',
                dataIndex: 'price',
                key: 'price',
                width: "120px",
                align: 'center',
            },
            {
                title: '销量',
                dataIndex: 'salesvolume',
                key: 'salesvolume',
                width: "80px",
                align: 'center',
            },
            {
                title: '库存',
                dataIndex: 'repertory',
                key: 'repertory',
                width: "80px",
                align: 'center',
            },
            {
                title: '排序',
                dataIndex: 'sort',
                key: 'sort',
                width: "80px",
                align: 'center',
            },
            {
                title: '状态',
                dataIndex: '',
                key: 'state',
                width: "80px",
                align: 'center',
                render: (record) => <Switch checkedChildren="显示" unCheckedChildren="隐藏" defaultChecked={record.state === 'false' ? false : true} />
            },
            {
                title: '操作时间',
                dataIndex: 'time',
                key: 'time',
                align: 'center',
            },
            {
                title: '操作',
                align: 'center',
                render: (text, record) => <div style={{ display: "flex", marginLeft: "40px" }}>
                    <Button style={{ margin: "0 5px", color: 'blue' }} onClick={() => { changevalue(record) }}>编辑</Button>
                    <Button style={{ color: 'blue' }} onClick={() => { this.btndel(record) }}>加入回收站</Button>
                </div>
            },
        ],

        column: [
            {
                title: 'ID',
                dataIndex: 'id',
                align: 'center',
                width: "70px",
            },
            {
                title: '商品图',
                dataIndex: '',
                align: 'center',
                key: 'img',
                width: "80px",
                render: (record) => <img src={record.img} alt='' style={{ width: "50px", height: "50px" }} />
            },
            {
                title: '商品名称',
                dataIndex: '',
                align: 'center',
                key: 'name',
                render: (record) => <p style={{ width: "100%", height: "50px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{record.name}</p>
            },
            {
                title: '商品售价',
                dataIndex: 'price',
                align: 'center',
                key: 'price',
                width: "90px",
            },
            {
                title: '库存',
                dataIndex: 'repertory',
                key: 'repertory',
                align: 'center',
                width: "80px",
            },
            {
                title: '销量',
                dataIndex: 'salesvolume',
                key: 'salesvolume',
                align: 'center',
                width: "80px",
            },
            {
                title: '排序',
                align: 'center',
                dataIndex: 'sort',
                width: "80px",
                key: 'sort',
            },
            {
                title: '状态',
                dataIndex: '',
                align: 'center',
                width: "80px",
                key: 'state',
                render: (record) => <Switch checkedChildren="显示" unCheckedChildren="隐藏" defaultChecked={record.state === 'false' ? false : true} />
            },
            {
                title: '操作时间',
                align: 'center',
                dataIndex: 'time',
                key: 'time',
            },
            {
                title: '操作',
                align: 'center',
                render: (text, record) => <div style={{ display: "flex", marginLeft: "60px" }}>
                    <Button style={{ margin: "0 5px", color: 'blue' }} onClick={() => { changevalue(record) }}>编辑</Button>
                    <Button style={{ color: 'blue' }} onClick={() => { this.btndel(record) }}>加入回收站</Button>
                </div>

            },
        ],

    }
    componentDidMount() {
        this.getdata()
    }
    //获取全部数据
    getdata = () => {
        axios.get('/Productdata', { params: { pindex: '0', psize: '100' } }).then((res) => {
            console.log(res);
            this.setState({
                data: res.data.data
            })
        });
    }
    //搜索
    onSearch = (value) => {
        axios.get(`/Productdata?search=${value}`).then(res => {
            console.log(res);
            if (res.data.code === 200) {
                this.setState({
                    data: res.data.data
                })
            }
        })

    }

    //加入回收站
    btndel = (record) => {
        console.log(record);
        axios.get(`/Productdetile?id=${record.id}`).then((res) => {
            console.log(res);
            if (res.data.code === 200) {
                this.getdata()
            }
        })
    }
    //进度条
    onChange = (current) => {
        console.log('onChange:', this.state.current);
        this.setState({
            current
        });
    };
    //进度条点击下一页
    nextStep = () => {
        this.setState({
            current: this.state.current + 1
        }, () => {
            console.log(this.state.current);
        })

    }
    //点击显示添加窗口
    btnadd = () => {
        this.setState({
            isShow: true
        })
    }
    //点击隐藏添加窗口
    btnstop = () => {
        this.setState({
            isShow: false
        })
    }

    render() {
        const { size, current } = this.state;
        return (
            <div className='management'>
                <Tabs defaultActiveKey="1" size={size} style={{ marginBottom: 32 }}>
                    <TabPane tab="出售中商品" key="1">
                        <div className='classify_shop'>
                            <span>商品分类：</span>
                            <Cascader options={options} onChange={onChange} placeholder="请选择" />
                            <span>商品搜索：</span>
                            <Space direction="vertical">
                                <Search placeholder="请输入商品名称、关键字、商品ID" onSearch={this.onSearch} style={{ width: 200 }} />
                            </Space>
                        </div>
                        <div className='classify_add'>
                            <Button onClick={this.btnadd}>添加商品</Button>
                        </div>
                        <div className='mock' style={{ display: this.state.isShow ? 'block' : 'none' }}>
                            <div className='mock_inner'>
                                <button onClick={this.btnstop}>X</button>
                                <Steps current={current} onChange={this.onChange}>
                                    <Step title="Step 1" description="商品信息" />
                                    <Step title="Step 2" description="商品详情" />
                                    <Step title="Step 3" description="其他设置" />
                                    <Step title="Step 4" description="规格设置" />
                                </Steps>
                                <button onClick={this.nextStep}>下一步</button>
                            </div>
                        </div>

                        <div className='classify_list'>
                            <Table dataSource={this.state.data} columns={this.state.columns} scroll={{ y: 540 }} rowSelection={Checkbox} rowKey="id" />
                        </div>
                    </TabPane>
                    <TabPane tab="仓库中商品" key="2">
                        <div className='classify_shop'>
                            <span>商品分类：</span>
                            <Cascader options={options} onChange={onChange} placeholder="请选择" />
                            <span>商品搜索：</span>
                            <Space direction="vertical">
                                <Search placeholder="请输入商品名称、关键字、商品ID" onSearch={this.onSearch} style={{ width: 200 }} />
                            </Space>
                        </div>
                        <div className='classify_add'>
                            <Button onClick={this.btnadd}>添加商品</Button>
                        </div>
                        <div className='mock' style={{ display: this.state.isShow ? 'block' : 'none' }}>
                            <div className='mock_inner'>
                                <button onClick={this.btnstop}>X</button>
                                <Steps current={current} onChange={this.onChange}>
                                    <Step title="Step 1" description="商品信息" />
                                    <Step title="Step 2" description="商品详情" />
                                    <Step title="Step 3" description="其他设置" />
                                    <Step title="Step 4" description="规格设置" />
                                </Steps>
                                <button onClick={this.nextStep}>下一步</button>
                            </div>
                        </div>

                        <div className='classify_list'>
                            <Table dataSource={this.state.data} columns={this.state.column} scroll={{ y: 540 }} rowSelection={Checkbox} rowKey="id" />
                        </div>
                    </TabPane>
                    <TabPane tab="已经售空商品" key="3">
                        <div className='classify_shop'>
                            <span>商品分类：</span>
                            <Cascader options={options} onChange={onChange} placeholder="请选择" />
                            <span>商品搜索：</span>
                            <Space direction="vertical">
                                <Search placeholder="请输入商品名称、关键字、商品ID" onSearch={this.onSearch} style={{ width: 200 }} />
                            </Space>
                        </div>
                        <div className='classify_add'>
                            <Button onClick={this.btnadd}>添加商品</Button>
                        </div>
                        <div className='mock' style={{ display: this.state.isShow ? 'block' : 'none' }}>
                            <div className='mock_inner'>
                                <button onClick={this.btnstop}>X</button>
                                <Steps current={current} onChange={this.onChange}>
                                    <Step title="Step 1" description="商品信息" />
                                    <Step title="Step 2" description="商品详情" />
                                    <Step title="Step 3" description="其他设置" />
                                    <Step title="Step 4" description="规格设置" />
                                </Steps>
                                <button onClick={this.nextStep}>下一步</button>
                            </div>
                        </div>

                        <div className='classify_list'>
                            <Table dataSource={this.state.data} columns={this.state.columns} scroll={{ y: 540 }} rowSelection={Checkbox} rowKey="id" />
                        </div>
                    </TabPane>
                    <TabPane tab="商品回收站" key="4">
                        <div className='classify_shop'>
                            <span>商品分类：</span>
                            <Cascader options={options} onChange={onChange} placeholder="请选择" />
                            <span>商品搜索：</span>
                            <Space direction="vertical">
                                <Search placeholder="请输入商品名称、关键字、商品ID" onSearch={this.onSearch} style={{ width: 200 }} />
                            </Space>
                        </div>
                        <div className='classify_add'>
                            <Button onClick={this.btnadd}>添加商品</Button>
                        </div>
                        <div className='mock' style={{ display: this.state.isShow ? 'block' : 'none' }}>
                            <div className='mock_inner'>
                                <button onClick={this.btnstop}>X</button>
                                <Steps current={current} onChange={this.onChange}>
                                    <Step title="Step 1" description="商品信息" />
                                    <Step title="Step 2" description="商品详情" />
                                    <Step title="Step 3" description="其他设置" />
                                    <Step title="Step 4" description="规格设置" />
                                </Steps>
                                <button onClick={this.nextStep}>下一步</button>
                            </div>
                        </div>

                        <div className='classify_list'>
                            <Table dataSource={this.state.data} columns={this.state.column} scroll={{ y: 540 }} rowSelection={Checkbox} rowKey="id" />
                        </div>
                    </TabPane>
                </Tabs>
            </div>
        );
    }
}

export default connect()(Goods_management);
